<template>
	<view class="goods_list">
		<!-- <button @click="click">点我啊</button> -->
		<view class="goods_item" v-for="item in goods_list" :key="item.id" @click="navigator(item.id)">
			<image :src="item.image"></image>
			<view class="price">
				<text>￥{{item.present_price}}</text>
				<text>￥{{item.original_price}}</text>
			</view>
			<view class="name">
				{{item.goods_name}}
			</view>
		</view>
	</view>
</template>

<script>
	import global from '../../components/common.vue'
	export default {
		data() {
			return {
				msg: 'hello-uni',
				goods_list: [
					{ 
						goods_name: '梨子', 
						present_price: 1,
						original_price: 2,
						image: "/media/goods_images/%E6%A2%A8%E5%AD%90.png",
					},
					{
						goods_name: '香蕉', 
						present_price: 3,
						original_price: 4,
						image: "/media/goods_images/33333.png",
					},
					{
						goods_name: '"苹果"', 
						present_price: 7,
						original_price: 9,
						image: "/media/goods_images/q111.png",
					}
				],
			}
		},
		onLoad() {
			this.click()
		},
		methods: {
			async click () {
			    const res = await this.$myRequest({
			      method: 'GET',
			      url: '/api/store/goods/'
			    })
			    this.msg = "update goods data!"
				this.goods_list = res.data
				// for goods in goods_list:this.$myRequest
				for (var i=0;i<this.goods_list.length;i++)
				{ 
					var goods_i = this.goods_list[i]
				    // console.log( goods_i + "<br>");
					
					// console.log("this.$baseUrl   "  + this.$baseUrl)
					goods_i.image =  this.$baseUrl + goods_i.image
					console.log("image_url: "  +goods_i.image)
				}
			  },

		}
	}
</script>

<style lang="scss">
	.goods_list {
		padding: 0 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.goods_item {
			background: #fff;
			width: 355rpx;
			margin: 10rpx 0;
			padding: 15rpx;
			box-sizing: border-box;
			image{
				width: 80%;
				height: 150px;
				display: block;
				margin: auto;
			}
			.price{
				color: $shop-color;
				font-size: 36rpx;
				margin: 20rpx 0 5rpx 0;
				text:nth-child(2){
					color: #ccc;
					font-size: 28rpx;
					margin-left: 17rpx;
					text-decoration: line-through;
				}
			}
			
			.name {
				font-size: 28rpx;
				line-height: 50rpx;
				padding-bottom: 15rpx;
				padding-top: 10rpx;
			}
		}
	}
</style>
